<template>
   <div id="app" v-loading="loading">
    <div id="header">
      WE - LINK
    </div>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">开始匹配</el-menu-item>
      <el-menu-item index="2">匹配历史</el-menu-item>
    </el-menu>
    <transition :name="transitionName" mode="out-in">
      <router-view/>
    </transition>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      activeIndex: '1',
      loading : false,
      transitionName:''
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      switch (key) {
        case "1":
          this.$router.push('/joinmatch');
          break;
        case "2":
          this.$router.push('/matchresult');
          break;
      }
    }
  },
  watch: {

    //使用watch 监听$router的变化，控制动画
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(from.meta && from.meta.index && to.meta && to.meta.index && to.meta.index>from.meta.index){
        //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }

    }
  }
}
</script>

<style>

html,body{
  height:100%;
  margin:0px;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height:100%;
  background-color:#4A90E2;
  margin:0px;
}

#header{
    padding-top: 30px;
    font-size: 15px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #4A90E2;
    line-height: 36px;
    background-color:#FFF;
}



.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 600ms;
  /*position: absolute;*/
}
.slide-right-enter {
  opacity: 0.4;
  transform: translate(-100%, 0);
}
.slide-right-leave-active {
  opacity: 0.4;
  transform: translate(100%, 0);
}
.slide-left-enter {
  opacity: 0.4;
  transform: translate(100%, 0);
}
.slide-left-leave-active {
  opacity: 0.4;
  transform: translate(-100%, 0);
}



</style>
